<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../element-for-in/element-for-in.html">
<link rel="import" href="../helpers/dialog-element.html">

<dom-module id="rbac-rule-constraints">
    <template>
        <style include="shared-styles tags-and-labels">
        :host {
            display: flex;
            align-items: center;
        }

        paper-dropdown-menu {
            width: 150px;

            --paper-dropdown-menu-input: {
                text-transform: uppercase;
            }

            --paper-input-container-underline: {
                /*display: none;*/
                opacity: 0.32;
            }
        }

        paper-dropdown-menu.short {
            /*width: 80px;*/
            margin-right: 16px;
        }

        paper-input {
            vertical-align: middle;
        }

        .flex {
            display: inline-flex;
        }

        .tag {
            vertical-align: middle;
        }

        paper-input {
            --paper-input-container-underline {
                opacity: 0.32;
            }
        }

        .tag iron-icon {
            color: #fff;
            width: 13px;
            height: 13px;
            cursor: pointer;
        }

        iron-icon.edit {
            color: inherit;
            padding: 8px;
            opacity: 0.32;
        }
        :host iron-icon {
            cursor: pointer;
        }
        </style>
        <span hidden$="[[!showConstraints]]">
            <span hidden$="[[!error]]" class="error">[[error]]</span>
            <iron-icon icon="icons:settings" on-tap="editConstraints" class="edit" title="Edit constraints"></iron-icon>
        </span>
        <template is="dom-if" if="[[showConstraints]]">
            <dialog-element id="editConstraints" modal="true" formId="editConstraints-[[index]]" fields="{{fields}}" form="{{form}}" single-column-form="[[singleColumnForm]]" inline="[[inline]]" modal=[[modal]]></dialog-element>
        </template>
    </template>
</dom-module>
<script>
const RBAC_CONSTRAINTS_FIELDS = [{
        name: 'constraints',
        label: 'Constraints in JSON',
        type: 'jsoneditor',
        value: {},
        defaultValue: {},
        show: true,
        required: false,
        helptext: 'Add/edit constraints in JSON format'
}]
    Polymer({
        is: 'rbac-rule-constraints',
        properties: {
            model: {
                type: Object,
            },
            rule: {
                type: Object
            },
            index: {
                type: Number,
            },
            showConstraints: {
                type: Boolean,
                value: false,
                computed: '_computeShowConstraints(rule.*)'
            },
            fields: {
                type: Array,
                value: function(){
                    return RBAC_CONSTRAINTS_FIELDS;
                }
            },
            singleColumnForm: {
                type: Boolean,
                value: true
            },
            inline: {
                type: Boolean,
                value: false
            },
            error: {
                type: String,
                value: ''
            },
            modal: {
                type: Boolean,
                value: true
            }
        },

        listeners: {
            'keyup': 'hotkeys',
            'confirmation': '_updateRuleConstraints'
        },
        _computeShowConstraints: function(rule) {
            // emty strings for ALL
            return ["machine", ""].indexOf(this.rule.rtype) > -1 && ["create","edit","resize",""].indexOf(this.rule.action)>-1;
        },

        hotkeys: function(e) {
            // if 'enter'
            if (e.keyCode === 13) {
                this.$.inputField.blur();
            }
        },
        hasConstraints(constraints){
            return constraints && Object.keys(constraints).length ? true : false;
        },
        editConstraints: function(e) {
            this.error = "";
            this._mapValuesToFields();
            this._showDialog({
                title: 'Edit constraints',
                reason:'edit.constraints',
                hideText: true,
                fields: this.fields,
                action: 'save'
            });
        },
        _showDialog: function(info) {
            var dialog = this.shadowRoot.querySelector('dialog-element#editConstraints');
            if (info) {
                for (var i in info) {
                    dialog[i] = info[i];
                }
            }
            dialog._openDialog();
        },
        _updateRuleConstraints: function(e) {
            // update rule.constraints
            var reason = e.detail.reason,
                response = e.detail.response;
            if (response == 'confirm' && reason == "edit.constraints") {
                var newConstraints = this.fields[0].value;
                this.dispatchEvent(new CustomEvent('update-constraints', 
                    { bubbles: true, composed: true, detail: { index: this.index, constraints: newConstraints}}));
            }
        },
        _mapValuesToFields: function() {
            // fill in fields with constraints corresponding values
            var constraints = JSON.stringify(this.rule.constraints);
            this.set('fields.0.value', JSON.parse(constraints) || {});
        }
    });
</script>